<!--suppress HtmlUnknownTarget, HtmlDeprecatedAttribute -->
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="{{url_for('static',filename='css/bootstrap.min.css')}}" rel="stylesheet">
  <link href="{{url_for('static',filename='css/docs.css')}}" rel="stylesheet">
  <link href="{{url_for('static',filename='css/sweetalert2.min.css')}}" rel="stylesheet">

  <script src="{{url_for('static',filename='js/bootstrap.bundle.min.js')}}"></script>
  <script src="{{url_for('static',filename='js/crypto-js.min.js')}}"></script>
  <script src="{{url_for('static',filename='js/jquery-1.12.4.min.js')}}"></script>
  <script src="{{url_for('static',filename='js/sweetalert2.all.min.js')}}"></script>
  <script src="{{url_for('static',filename='js/chart.js')}}"></script>

  <link rel="icon" href="{{url_for('static',filename='images/ico/favicon2.ico')}}">
  <title>{{Name}}缘茶智学管理端</title>
</head>

<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
      <a class="navbar-brand">
        <img src="{{url_for('static',filename='images/ico/favicon2.ico')}}" alt="" width="30" height="24">
        缘茶智学管理端-DashBoard
      </a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">

        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="system">主页</a>
          </li>

          <!--上课模块开始-->
          <li class="nav-item">
            <a class="nav-link active" href="class">课程管理</a>
          </li>
          <!--上课模块结束-->



          <!--学生模块开始-->
          <!-- <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown"
              aria-expanded="false">
              学生状态
            </a>
            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
              <li><a class="dropdown-item" href="UndoScore">撤分审批</a></li>
              <li><a class="dropdown-item" href="dutyMessage">值周信息</a></li> -->
          <!-- </ul>
          </li> -->
          <!-- 学生模块结束 -->

          <!--学生模块开始-->
{#          <li class="nav-item">#}
{#            <a class="nav-link active" aria-current="page" href="StuCdt">学生状态数据</a>#}
{#          </li>#}
          <!--帮助模块结束-->




          <!--个人数据-->
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown"
              aria-expanded="false">
              账号管理
            </a>
            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
              <li><a class="dropdown-item disabled">用户名：admin</a></li>
              <!-- <li><a class="dropdown-item">等级：{{Rate}}</a></li>
              <li><a class="dropdown-item">任教班级：{{Grade}}{{Class}}</a></li> -->
              <li>
                <hr class="dropdown-divider">
              </li>
                <li>
                    <a class="dropdown-item" href="account_management">账户设置</a>
                </li>
                <li>
                    <a class="dropdown-item" href="systemlogout">登出</a>
                </li>

            </ul>
          </li>


        </ul>


{#        <a class="btn btn-outline-success" type="submit" href="systemlogout">登出</a>#}

      </div>
    </div>
  </nav>
  <br>
  <div class="container">
    <div class="row">
      <div class="col lg-6 sm-12">
        <div class="card" style="height: 80vh;">
          <div class="card-header" align="center">
            学生上课状态对比分析
          </div>
          <div class="card-body">
            <canvas id="myChart1">
              <!--这里是图表-->
            </canvas>
            <br>
            <div align="center">
              <button class=" btn btn-secondary" onclick="location.href = 'StuCdt'">点击查询详细数据</button>
            </div>
          </div>

        </div>

      </div>
      <div class="col lg-6 sm-12">

        <div class="card" style="height: 80vh;"> 
          <div class=" card-header" align="center">
            学生答题情况
          </div>
          <div class=" card-body">
            <div style="height: 50vh;" align="center">
              <canvas id="DT_canvas">
                <!--这里是图表2-->
              </canvas>

            </div>
            <br>
            <div align="center">
              <button class="btn btn-primary" onclick="location.href = 'StuEXD'">点击查询详细数据</button>
            </div>
          </div>
        </div>


      </div>
    </div>
  </div>




  <!-- <button onclick="draw_class_data()">111</button> -->
</body>

<script>
  function draw_class_data() {
    const data = {
      labels: '{{ stu_cdt_time }}'.split(','),
      datasets: [{
        label: '课堂得分',
        data: '{{ stu_cdt }}'.split(','),
        fill: false,
        borderColor: 'rgb(75, 192, 255)',
        tension: 0.1
      }]
    };
    console.log(data)
    const Class_Chart_Config = { type: 'line', data: data };
    const Class_Chart = document.getElementById('myChart1').getContext('2d');
    new Chart(Class_Chart, Class_Chart_Config);
  }


  function draw_DT_data() {
    const data = {
      labels: ['错误', '正确',],
      datasets: [{
        label: '答题情况统计',
        data: [parseInt('{{errors}}'), parseInt('{{right}}')],
        backgroundColor: [
          'rgb(255, 99, 132)',
          'rgb(54, 255, 132)'
        ],
        hoverOffset: 4
      }]
    };
    const DT_config = {
      type: 'doughnut',
      data: data,
    };
    const DT_canvas = document.getElementById('DT_canvas');
    new Chart(DT_canvas, DT_config);
  }


  window.onload = function () {
    draw_class_data();
    draw_DT_data();
  }
</script>